<template>
	<view class="flex-center">
		<view class="serach-box">
			<uni-icons type="search" size="48rpx" color="#9A9A9A"></uni-icons>
			<input
				type="text"
				v-model="serachVal"
				:placeholder="placeholder"
				class="input-box"
				placeholder-style="color:#7D7D7D"
			/>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		placeholder: String,
	},
	data() {
		return {
			serachVal: '',
		}
	},
	methods: {},
	watch: {
		serachVal(val) {
			this.$emit('serachInput', val)
		},
	},
}
</script>
<style lang="scss" scoped>
.serach-box {
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8rpx 8rpx 8rpx 20rpx;
	background: #f2f2f2;
	width: 100%;
}
.input-box {
	width: 80%;
	padding-left: 10rpx;
	font-size: 30rpx;
}
.button-radius {
	border-radius: 50rpx;
	width: 130rpx;
	background: #3a74fc;
}
</style>
